<template>
  <div>
    <mt-header title="卡酷公寓欢迎您">
      <!-- <mt-button icon="back" to="/" slot="left"></mt-button> -->
      <router-link to="/" slot="left" >返回</router-link>
      <router-link to="/Register" slot="right">注册</router-link>
    </mt-header>
    <mt-field  type="text" 
    label="用户名"
    placeholder="请输入用户名" @blur.native.capture="checkUsername"  v-model="username" :state="usernameState"> </mt-field>
    <mt-field  type="password" 
    label="密码"
    placeholder="请输入密码" @blur.native.capture="checkPwd"  v-model="pwd" :state="pwdState"> </mt-field>

    <mt-button size='large' @click="checkForm" type='primary'>快速登录</mt-button>

  </div>


</template>

<script>
export default {
  data(){
    return {
    username:"",
    usernameState:"",
    pwd:"",
    pwdState:"",

    }
 },

  methods:{
    checkPwd(){
       let pwd=this.pwd;
      let reg=/^\d{6}$/;
      if(reg.test(pwd)){
        this.pwdState='success';
        console.log('pwd success...');
        return true
      }else{ 
        this.pwdState='error';
        console.log('pwd fail...')
        return false}
    },
    checkUsername(){
      let username=this.username;
      let reg=/^\w{6,12}$/;
      if(reg.test(username)){
        this.usernameState='success';
        console.log('username success...');
        return true
      }else{ 
        this.usernameState='error';
        console.log('username fail...')
        return false}
    },
    // checkRepwd(){
    //   let repwd=this.repwd;
    //   let reg=/^\d{6}$/;
    //   if(reg.test(repwd) && this.pwd== this.repwd){
    //     this.repwdState='success';
    //     console.log('repwd success');
    //     return true
    //   }else {this.repwdState='error';
    //   console.log('repwd fail')
    //   return false}
    // },
    // 验证表单，点击按钮后触发
    checkForm(){
      // 验证用户名
      if(this.checkUsername()&& this.checkPwd()){
 
      }else{

      }

    }
  } 
}
</script>